<template>
    <div class="filter-container">
        <el-icon>
            <Aim />
        </el-icon>
        <el-form :model="activity" class="filter-form">
            <div class="form-row">
                <el-form-item label="负责人" class="form-item">
                    <el-select v-model="activity.ownerId" placeholder="请选择负责人" style="width: 190px;" clearable
                        @click="loadOwner" class="form-input">
                        <el-option v-for="item in ownerOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input v-model="activity.name" placeholder="请输入活动名称" clearable />
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-date-picker v-model="activity.activityTime" type="datetimerange" start-placeholder="活动开始时间"
                        end-placeholder="活动结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                        time-format="HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                </el-form-item>
                <el-form-item label="活动预算">
                    <el-input v-model="activity.cost" placeholder="请输入活动名词" clearable />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="activity.createTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择创建时间" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">搜 索</el-button>
                    <el-button type="primary" plain>重 置</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <br />
    <el-button type="primary" @click="addACtivity">添加活动</el-button>
    <el-button type="danger" @click="batchDel">批量删除</el-button>

    <el-table :data="activityPageInfo.list" style="width: 100%" @selection-change="selectId">

        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" />
        <el-table-column property="ownerName" label="负责人" />
        <el-table-column property="name" label="活动名称" />
        <el-table-column property="startTime" label="开始时间" show-overflow-tooltip />
        <el-table-column property="endTime" label="结束时间" show-overflow-tooltip />
        <el-table-column property="cost" label="活动预算" />
        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" @click="view(scope.row.id)">查看</el-button>
                <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper, total" :total="activityPageInfo.total"
        :page-size="activityPageInfo.pageSize" @change="toPage" />
</template>

<script setup>
import { Aim } from "@element-plus/icons-vue";
import { inject, ref, onMounted } from "vue";
import { doGet } from "../http/httpRequest";
import { showMessage } from "../util/message";
import { useRouter } from "vue-router";


let activity = ref({})

let ownerOptions = ref([{}])

let activityPageInfo = ref({})

let router = useRouter();

let flushPage = inject('flush');

onMounted(() => {
    loadActivityList(1)
})

const loadActivityList = (current) => {
    let timeArray = [];
    //因为这里是两个时间，所以要循环两次，将两个时间分别放到数组中
    let activityTime = activity.value.activityTime;
    for (let index in activityTime) {
        timeArray.push(activityTime[index]);
    }


    doGet('api/activities', {
        current: current,
        ownerId: activity.value.ownerId,
        activityName: activity.value.name,
        startTime: timeArray[0],
        endTime: timeArray[1],
        cost: activity.value.cost,
        createTime: activity.value.createTime
    }).then(resp => {
        if (resp) {
            if (resp.data.code == 200) {
                activityPageInfo.value = resp.data.info;
            } else {
                showMessage('数据加载失败', error)
            }
        }
    })
}

const onSearch = () => {
    loadActivityList(1);
}

const toPage = (currentPage, pageSize) => {
    loadActivityList(currentPage);
}

const loadOwner = () => {
    doGet('api/owners', {}).then(resp => {
        if (resp) {
            if (resp.data.code == 200) {
                ownerOptions.value = resp.data.info;
            } else {
                showMessage('数据加载失败', error)
            }
        }
    })
}

//添加活动
const addACtivity = () => {

}

//批量删除
const batchDel = () => {

}

//详情
const view = (id) => {
    router.push('/dashboard/activity/' + id);
}

//编辑
const edit = (id) => {

}

//删除
const del = (id) => {

}

</script>
<style scoped>
.filter-container {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-form {
    :deep(.el-form-item) {
        margin-bottom: 18px;
    }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    .form-item {
        margin: 0;

        :deep(.el-form-item__label) {
            font-weight: 600;
            color: #2d3a4b;
            padding-right: 12px;
        }
    }

    .form-input {
        width: 240px;

        &.el-date-editor {
            width: 360px;
        }
    }

    .el-button {
        margin-left: 12px;
        padding: 10px 20px;
    }
}
</style>